<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="全部" name="first">
        <el-form
          class="app-container"
          ref="elForm"
          :model="logList"
          size="medium"
          :inline="true"
          label-width="100px"
        >
          <el-form-item label="提交人" prop="reportPerson">
            <el-select
              v-model="logList.reportPerson"
              placeholder="请选择提交人"
              clearable
              style="width: '100px'"
            >
              <el-option
                v-for="(item, index) in field103Options"
                :key="index.name"
                :label="item.value"
                :value="item.name"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="提交日期" prop="reportDate">
            <el-date-picker
              v-model="logList.reportDate"
              format="yyyy-MM-dd"
              style="width: 200px"
              value-format="yyyy-MM-dd"
              placeholder="请选择日期选择"
              clearable
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="搜索" prop="keyword">
            <el-input
              v-model="logList.keyword"
              placeholder="请输入关键字搜索"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>

          <el-form-item label="">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="medium"
              v-hasPermi="['service:daily:query']"
              @click="submitForm"
            >
              搜索
            </el-button>
          </el-form-item>
          <el-button
            type="primary"
            v-hasPermi="['service:daily:edit']"
            @click="submitLog"
            >提交日志</el-button
          >
        </el-form>
        <!-- 提交日志弹出框 -->
        <el-dialog
          title="提交日志"
          :visible.sync="dialogVisible"
          width="600px"
          append-to-body
        >
          <el-form ref="form" :model="log" :rules="rules" label-width="80px">
            <el-row>
              <el-col :span="14">
                <el-form-item
                  label="工作日期:"
                  prop="workDate"
                  label-width="115px"
                >
                  <el-date-picker
                    v-model="log.workDate"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="5" style="margin-left: 30px">
                <el-form-item prop="workType" label-width="0">
                  <el-select
                    v-model="log.workType"
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.name"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="20">
                <el-form-item label="交接内容:" label-width="115px">
                  <el-input
                    :autosize="{ minRows: 4, maxRows: 8 }"
                    type="textarea"
                    v-model="log.remainProblem"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="20">
                <el-form-item label="工作日志:" label-width="115px">
                  <el-input
                    :autosize="{ minRows: 4, maxRows: 8 }"
                    type="textarea"
                    v-model="log.workLogs"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="getSubmits">提交</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>
          </span>
        </el-dialog>

        <!-- 表格 -->
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          style="width: 98%; margin: auto"
          :header-cell-style="{ background: '#f7f7f7' }"
        >
          <el-table-column
            type="index"
            width="50"
            label="序号"
            align="center"
          ></el-table-column>
          <el-table-column prop="name" label="姓名" align="center" width="100">
          </el-table-column>
          <el-table-column
            prop="workDate"
            label="工作日期"
            align="center"
            width="200"
          >
          </el-table-column>
          <el-table-column
            prop="wrokType"
            label="早晚班"
            align="center"
            width="110"
          >
          </el-table-column>
          <el-table-column
            prop="workLog"
            label="工作日志"
            align="center"
            width="500"
          >
          </el-table-column>
          <el-table-column
            width="500"
            prop="remainProblem"
            align="center"
            label="交接内容"
          >
          </el-table-column>
          <el-table-column
            width="208"
            prop="applyTime"
            align="center"
            label="提交时间"
          />
        </el-table>
        <el-pagination
          class="pagination"
          align="right"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="logList.page"
          :page-size="logList.pageSize"
          :total="totalPage"
        >
        </el-pagination>
      </el-tab-pane>

      <!-- 我提交的 -->
      <el-tab-pane label="我提交的" name="second">
        <el-form
          class="app-container"
          ref="elForm"
          :model="myLogList"
          size="medium"
          :inline="true"
          label-width="100px"
        >
          <el-form-item label="提交日期" prop="">
            <el-date-picker
              v-model="myLogList.reportDate"
              format="yyyy-MM-dd"
              style="width: 200px"
              value-format="yyyy-MM-dd"
              placeholder="请选择日期选择"
              clearable
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="搜索">
            <el-input
              v-model="myLogList.keyword"
              placeholder="请输入关键字搜索"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="medium"
              v-hasPermi="['service:daily:query']"
              @click="MySubmitForm"
            >
              搜索
            </el-button>
          </el-form-item>
          <el-button
            type="primary"
            v-hasPermi="['service:daily:edit']"
            @click="mySubmitLog"
            >提交日志</el-button
          >
          <!-- 提交日志弹出框 -->
          <el-dialog
            title="提交日志"
            :visible.sync="dialog"
            width="600px"
            append-to-body
          >
            <el-form
              ref="form"
              :model="MyLog"
              :rules="rules"
              label-width="80px"
            >
              <el-row>
                <el-col :span="14">
                  <el-form-item
                    label="工作日期:"
                    prop="workDate"
                    label-width="115px"
                  >
                    <el-date-picker
                      v-model="MyLog.workDate"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="5" style="margin-left: 30px">
                  <el-form-item prop="workType" label-width="0">
                    <el-select
                      v-model="MyLog.workType"
                      clearable
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.name"
                        :value="item.name"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="交接内容:" label-width="115px">
                    <el-input
                      :autosize="{ minRows: 4, maxRows: 8 }"
                      type="textarea"
                      v-model="MyLog.remainProblem"
                      placeholder="请输入"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="工作日志:" label-width="115px">
                    <el-input
                      :autosize="{ minRows: 4, maxRows: 8 }"
                      type="textarea"
                      v-model="MyLog.workLogs"
                      placeholder="请输入"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="MygetSubmits">提交</el-button>
              <el-button @click="dialog = false">取 消</el-button>
            </span>
          </el-dialog>
          <!-- 表格 -->
          <el-table
            :data="MyTableData"
            border
            style="width: 100%"
            :header-cell-style="{ background: '#f7f7f7' }"
          >
            <el-table-column
              type="index"
              width="50"
              label="序号"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              width="120"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="workDate"
              label="日期"
              width="150"
              align="center"
            >
            </el-table-column>

            <el-table-column
              prop="wrokType"
              label="早晚班"
              width="120"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="workLog"
              label="工作日志"
              width="500"
              align="center"
            >
            </el-table-column>
            <el-table-column
              width="459"
              prop="remainProblem"
              label="交接内容"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="applyTime"
              label="提交时间"
              width="180"
              align="center"
            >
            </el-table-column>

            <el-table-column label="操作" width="100" align="center">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  v-hasPermi="['service:daily:edit']"
                  @click="checkDetail(scope.row)"
                >
                  编辑</el-button
                >

                <el-button
                  @click="handleClick(scope.$index, scope.row)"
                  type="text"
                  size="small"
                  v-hasPermi="['service:daily:edit']"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <!-- 删除提示框 -->
          <el-dialog
            title="提示"
            :visible.sync="delVisible"
            width="300px"
            center
          >
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="delVisible = false">取 消</el-button>

              <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
          </el-dialog>

          <!-- 分页 -->
          <el-pagination
            class="pagination"
            align="right"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="myLogList.page"
            :page-size="myLogList.pageSize"
            :total="MyTotalPage"
          >
          </el-pagination>
          <!-- 编辑弹出框 -->
          <el-dialog
            title="提交日志"
            :visible.sync="compile"
            width="600px"
            append-to-body
          >
            <el-form
              ref="form"
              :model="MyLog"
              :rules="rules"
              label-width="80px"
            >
              <el-row>
                <el-col :span="14">
                  <el-form-item
                    label="工作日期:"
                    prop="workDate"
                    label-width="115px"
                  >
                    <el-date-picker
                      v-model="MyLog.workDate"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="5" style="margin-left: 30px">
                  <el-form-item prop="workType" label-width="0">
                    <el-select
                      v-model="MyLog.workType"
                      clearable
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.name"
                        :value="item.name"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="交接内容:" label-width="115px">
                    <el-input
                      :autosize="{ minRows: 4, maxRows: 8 }"
                      type="textarea"
                      v-model="MyLog.remainProblem"
                      placeholder="请输入"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="工作日志:" label-width="115px">
                    <el-input
                      :autosize="{ minRows: 4, maxRows: 8 }"
                      type="textarea"
                      v-model="MyLog.workLogs"
                      placeholder="请输入"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="MygetSubmits">提交</el-button>
              <el-button @click="compile = false">取 消</el-button>
            </span>
          </el-dialog>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { list, submit, decline, personlist } from "@/api/service/daily";
import utils from "../../js/index";
export default {
  name: "Daily",
  components: {},
  props: [],
  data() {
    return {
      // 表单参数
      form: {},
      // 提交日志弹出框
      dialogVisible: false,
      dialog: false,
      // 编辑弹出框
      compile: false,
      // 加载
      loading: true,
      // tab切换默认显示
      activeName: "first",
      options: [
        {
          value: "1",
          name: "早班",
        },
        {
          value: "2",
          name: "晚班",
        },
        {
          value: "3",
          name: "行政班",
        },
      ],
      // 日志列表
      tableData: [],
      // 工作日志
      workLog: "",
      // 数据总条数
      totalPage: 0,
      rules: {
        workDate: [
          {
            required: true,
            message: "请选择日期",
            trigger: "blur",
          },
        ],
        workType: [
          {
            required: true,
            message: "请选择班次",
            trigger: "blur",
          },
        ],
        // workLogs: [
        //   {
        //     required: true,
        //     message: "请输入工作日志",
        //     trigger: "blur"
        //   }
        // ],
        // remainProblem: [
        //   {
        //     required: true,
        //     message: "请输入内容",
        //     trigger: "blur"
        //   }
        // ]
      },
      // 提交人列表
      field103Options: [],
      // 提交日志的参数
      log: {
        workDate: "",
        workType: "",
        workLogs: "",
        remainProblem: "",
      },
      //请求日志列表的参数
      logList: {
        page: 1,
        pageSize: 10,
        keyword: "",
        reportPerson: "all",
        reportDate: "",
      },
      // 我提交的日志列表参数
      myLogList: {
        page: 1,
        pageSize: 10,
        keyword: "",
        reportPerson: "",
        reportDate: "",
      },
      // 我提交的日志列表
      MyTableData: [],
      //我提交的总条数
      MyTotalPage: 0,
      //提交日志参数
      MyLog: {
        workDate: "",
        workType: "",
        workLogs: "",
        remainProblem: "",
      },
      delVisible: false, //删除提示弹框的状态
      ids: [],
      // 删除的索引
      idx: "",
      // 删除的id
      mgs: "",
    };
  },
  computed: {},
  watch: {
    "logList.page": {
      handler: function (res) {
        this.logList.page = res;
        this.getList();
      },
    },
    "myLogList.page": {
      handler: function (res) {
        this.myLogList.page = res;
        this.MyGetList();
      },
    },
    deep: true,
  },
  created() {
    this.getList();
    this.MyGetList();
    this.getPersonlist();
    this.myLogList.reportPerson = localStorage.getItem("userName");
  },
  mounted() {},
  methods: {
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      //   this.currentPage = 1;
      //   this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.logList.page = val;
    },
    // 客服列表
    getPersonlist() {
      personlist().then((response) => {
        if (response.code == 200) {
          // let all = "全部";
          // let arr = [all, ...response.data];
          var list = response.data.map((e) => {
            return { name: e, value: e == "all" ? "全部" : e };
          });

          //this.field103Options = response.data;
          this.field103Options = list;
        } else {
          this.$message.error(response.msg);
        }
      });
    },
    // 搜索
    submitForm() {
      // if (this.logList.reportPerson == "全部") {
      //   this.logList.reportPerson = "";
      // }
      list(this.logList).then((response) => {
        this.tableData = response.data.dayReportInfos;
        this.totalPage = response.data.totalPage * response.data.pageSize;
      });
    },
    //获取列表
    getList() {
      var that = this;
      list(that.logList).then((response) => {
        if (response.code == 200) {
          that.loading = false;
          that.tableData = response.data.dayReportInfos;
          that.totalPage = response.data.totalPage * response.data.pageSize;
          // this.logList.reportPerson = "全部";
        } else {
          this.$message.error(response.msg);
        }
      });
    },
    // 日期格式化
    newDate(date) {
      return utils.utils.NewDate(date);
    },
    // 提交日志
    getSubmits() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.workType != undefined) {
            submit(this.log).then((res) => {
              if (res.code == 200) {
                this.getList();
                this.MyGetList();
                this.dialogVisible = false;
                this.$message({
                  showClose: true,
                  message: "提交成功",
                  type: "success",
                });
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        }
      });
    },
    // 我提交的页面
    MyGetList() {
      list(this.myLogList).then((response) => {
        this.MyTableData = response.data.dayReportInfos;
        this.MyTotalPage = response.data.totalPage * response.data.pageSize;
      });
    },
    // 搜索
    MySubmitForm() {
      list(this.myLogList).then((response) => {
        this.MyTableData = response.data.dayReportInfos;
        this.MyTotalPage = response.data.totalPage * response.data.pageSize;
      });
    },
    // 编辑
    checkDetail(val) {
      this.MyLog.workDate = this.newDate(val.workDate);
      this.MyLog.workType = val.wrokType;
      this.MyLog.workLogs = val.workLog;
      this.MyLog.remainProblem = val.remainProblem;
      this.compile = true;
      this.form.workType = this.MyLog.workType;
    },
    // 删除
    handleClick(index, row) {
      this.delVisible = true;
      this.idx = index;
      this.mgs = row.id;
    },
    deleteRow() {
      decline({ id: this.mgs }).then((response) => {
        if (response.code == 200) {
          this.MyGetList();
          this.getList();
          this.$message({
            showClose: true,
            message: "删除成功",
            type: "success",
          });
        } else {
          this.$message.error(response.msg);
        }
      });
      this.delVisible = false;
    },
    MygetSubmits() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.workType != undefined) {
            submit(this.MyLog).then((res) => {
              if (res.code == 200) {
                this.MyGetList();
                this.getList();
                this.dialog = false;
                this.compile = false;
                this.$message({
                  showClose: true,
                  message: "提交成功",
                  type: "success",
                });
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        }
      });
    },
    // 提交日志按钮
    submitLog() {
      (this.log = {
        workDate: "",
        workType: "",
        workLogs: "",
        remainProblem: "",
      }),
        (this.dialogVisible = true);
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      _this.gettime = yy + "-" + mm + "-" + dd;
      _this.log.workDate = _this.gettime;
      _this.form.workType = _this.log.workType;
    },
    mySubmitLog() {
      (this.MyLog = {
        workDate: "",
        workType: "",
        workLogs: "",
        remainProblem: "",
      }),
        (this.dialog = true);
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      _this.gettime = yy + "-" + mm + "-" + dd;
      this.MyLog.workDate = this.gettime;
      _this.form.workType = _this.MyLog.workType;
    },
  },
};
</script>

<style>
.el-tabs__item {
  left: 15%;
}

.el-tabs__active-bar {
  left: 15%;
}

.pagination {
  margin-top: 2%;
  margin-bottom: 2%;
}
</style>
